<template>
	<view class="container">
		<!-- 自定义顶部导航栏 -->
		<view class="custom-app-bar-wrapper" :style="{ height: `calc(100rpx + ${statusBarHeight}px)` }">
			<view class="custom-app-bar" :style="{ top: statusBarHeight + 'px' }">
				<u-icon name="arrow-left" size="40" class="back-icon" @click="goBack"></u-icon>
				<text class="title">计划详情</text>
				<u-icon name="more-dot-fill" size="40" class="more-icon" @click="showActionSheet = true"></u-icon>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content" :style="{ paddingTop: `calc(100rpx + ${statusBarHeight}px)` }">
			<!-- 计划基本信息 -->
			<view class="plan-info" v-if="planDetail">
				<view class="plan-header">
					<view class="plan-type">
						<text class="type-tag">{{ planDetail.planType === 1 ? '绘本集计划' : '自定义计划' }}</text>
					</view>
					<view class="plan-stats">
						<view class="stat-item">
							<text class="stat-label">每天学习</text>
							<text class="stat-value">{{ planDetail.learnAFewNewThingsEveryDay }}个</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">复习次数</text>
							<text class="stat-value">{{ planDetail.reviewFrequency }}次</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">计划天数</text>
							<text class="stat-value">{{ planDetail.plannedDays || 0 }}天</text>
						</view>
					</view>
				</view>

				<!-- 绘本集信息 -->
				<view class="bookshelf-section" v-if="planDetail.planType === 1 && bookShelfList.length > 0">
					<view class="section-title">
						<text>绘本集 ({{ bookShelfList.length }})</text>
					</view>
					<view class="bookshelf-list">
						<view class="bookshelf-item" v-for="item in bookShelfList" :key="item.id">
							<image class="bookshelf-cover" :src="item.image || '/static/empty.png'" mode="aspectFill"></image>
							<view class="bookshelf-info">
								<text class="bookshelf-name">{{ item.name }}</text>
								<text class="bookshelf-count">{{ item.count || 0 }}本</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 计划项目列表 -->
				<view class="plan-items-section" v-if="planDetail.bookReadingProgramItemRespVOList && planDetail.bookReadingProgramItemRespVOList.length > 0">
					<view class="section-title">
						<text>学习计划</text>
					</view>
					<view class="plan-items">
						<view class="plan-item" v-for="(item, index) in planDetail.bookReadingProgramItemRespVOList" :key="item.id">
							<view class="day-header">
								<text class="day-number">第{{ item.days }}天</text>
								<text class="book-count">{{ item.bookDO ? item.bookDO.length : 0 }}本书</text>
							</view>
							<view class="book-list" v-if="item.bookDO && item.bookDO.length > 0">
								<view class="book-item" v-for="book in item.bookDO" :key="book.id">
									<image class="book-cover" :src="getBookCoverUrl(book)" mode="aspectFill"></image>
									<text class="book-name">{{ book.bookName || book.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-state" v-if="loading">
				<u-loading mode="flower"></u-loading>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!planDetail && !loading">
				<image src="/static/empty.png" class="empty-image"></image>
				<text class="empty-text">计划不存在</text>
			</view>
		</view>

		<!-- 操作菜单 -->
		<u-action-sheet 
			v-model="showActionSheet" 
			:list="actionList" 
			@click="onActionClick"
		></u-action-sheet>
	</view>
</template>

<script>
	import * as BookRecordApi from '@/api/bookRecord'
	import * as BookShelfApi from '@/api/bookShelf'

	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				planId: null,
				planDetail: null,
				bookShelfList: [],
				loading: false,
				showActionSheet: false,
				actionList: [
					{ text: '编辑计划', color: '#007aff' },
					{ text: '删除计划', color: '#ff3b30' }
				]
			};
		},
		onLoad(options) {
			if (options.id) {
				this.planId = options.id;
				this.getPlanDetail();
			}
		},
		methods: {
			// 获取计划详情
			async getPlanDetail() {
				this.loading = true;
				try {
					const response = await BookRecordApi.getBookReadingProgramDetail(this.planId);
					if (response.code === 0) {
						this.planDetail = response.data;
						// 如果是绘本集计划，获取绘本集信息
						if (this.planDetail.planType === 1 && this.planDetail.bookShelfIds) {
							this.getBookShelfInfo();
						}
					} else {
						this.$toast(response.msg || '获取计划详情失败');
					}
				} catch (error) {
					console.error('获取计划详情失败:', error);
					this.$toast('获取计划详情失败');
				} finally {
					this.loading = false;
				}
			},

			// 获取绘本集信息
			async getBookShelfInfo() {
				try {
					const bookShelfIds = this.planDetail.bookShelfIds.split('_').filter(id => id);
					const response = await BookShelfApi.getBookShelfList({
						recycleBin: 'false'
					});
					if (response.code === 0) {
						this.bookShelfList = response.data.list.filter(item => 
							bookShelfIds.includes(item.id.toString())
						);
					}
				} catch (error) {
					console.error('获取绘本集信息失败:', error);
				}
			},

			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 操作菜单点击
			onActionClick(index) {
				if (index === 0) {
					// 编辑计划
					uni.navigateTo({
						url: '/pages/plan/edit?id=' + this.planId
					});
				} else if (index === 1) {
					// 删除计划
					this.deletePlan();
				}
			},

			// 删除计划
			deletePlan() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个计划吗？删除后无法恢复。',
					success: async (res) => {
						if (res.confirm) {
							try {
								const response = await BookRecordApi.deleteBookReadingProgram(this.planId);
								if (response.code === 0) {
									this.$toast('删除成功');
									setTimeout(() => {
										uni.navigateBack();
									}, 1500);
								} else {
									this.$toast(response.msg || '删除失败');
								}
							} catch (error) {
								console.error('删除计划失败:', error);
								this.$toast('删除计划失败');
							}
						}
					}
				});
			},

			// 获取书籍封面URL
			getBookCoverUrl(book) {
				if (book.coverUrl) {
					return book.coverUrl;
				}
				if (book.url && book.url.trim()) {
					// 处理逗号分隔的图片名称，取第一张
					const imageNames = book.url.split(',');
					if (imageNames.length > 0 && imageNames[0].trim()) {
						return `/static/url/${imageNames[0].trim()}`;
					}
				}
				// url为空时默认显示defualt_1.png
				return '/static/url/defualt_1.png';
			}
		}
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f7f7f7;
	}

	.custom-app-bar-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}

	.custom-app-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.back-icon {
		position: absolute;
		left: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.more-icon {
		position: absolute;
		right: 20rpx;
	}

	.content {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
	}

	.plan-info {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.plan-header {
		margin-bottom: 30rpx;
	}

	.plan-type {
		margin-bottom: 20rpx;
	}

	.type-tag {
		padding: 8rpx 16rpx;
		background-color: #e8f4fd;
		color: #1890ff;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.plan-stats {
		display: flex;
		justify-content: space-between;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.stat-value {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.bookshelf-section,
	.plan-items-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		margin-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.bookshelf-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.bookshelf-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
	}

	.bookshelf-cover {
		width: 60rpx;
		height: 60rpx;
		border-radius: 6rpx;
		margin-right: 20rpx;
	}

	.bookshelf-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.bookshelf-name {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 6rpx;
	}

	.bookshelf-count {
		font-size: 22rpx;
		color: #999;
	}

	.plan-items {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.plan-item {
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
	}

	.day-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.day-number {
		font-size: 26rpx;
		font-weight: bold;
		color: #333;
	}

	.book-count {
		font-size: 22rpx;
		color: #999;
	}

	.book-list {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.book-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 120rpx;
	}

	.book-cover {
		width: 80rpx;
		height: 80rpx;
		border-radius: 6rpx;
		margin-bottom: 8rpx;
	}

	.book-name {
		font-size: 20rpx;
		color: #666;
		text-align: center;
		line-height: 1.2;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.loading-state,
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 40rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
		opacity: 0.6;
	}

	.empty-text,
	.loading-text {
		font-size: 28rpx;
		color: #999;
	}

	.loading-text {
		margin-top: 20rpx;
	}
</style>